<template>
    <div class="payType bg-white-pk">
        <div v-for="(item, index) in icons"
             :key="item.id"
             @click="handleCheck(index)"
             class="typeItem">
            <van-icon class-prefix="pk-icon" :name="item.name" size="30" :color="item.color"></van-icon>
            <van-icon v-show="item.isCheck" class-prefix="pk-icon" name="success" size="20" color="#D82D11"></van-icon>
        </div>
    </div>
</template>

<script>
    export default {
        name: "payType",
        components: {},

        data() {
            return {
                icons: [
                    {
                        name: "pay-wx",
                        color: "#09bb07",
                        id: 0,
                        isCheck: false
                    },
                    // {
                    //     name: "pay-zfb",
                    //     color: "#02abf0",
                    //     id: 1,
                    //     isCheck: false
                    // },
                    {
                        name: "pay-balance",
                        color: "#d82d11",
                        id: 2,
                        isCheck: false
                    }
                ]
            }
        },

        created() {
        },
        computed: {},
        watch: {},
        methods: {
            handleCheck(index) {
                this.icons.forEach((item, idx) => {
                    item.isCheck = index === idx
                });
                let payType = null;
                switch (this.icons[index].name) {
                    case "pay-zfb":
                        payType = "1";
                        break;
                    case "pay-wx":
                        payType = "2";
                        break;
                    case "pay-balance":
                        payType = "3";
                        break;
                }
                this.$emit("change", payType)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .payType {
        .typeItem {
            padding: 0 15px;
            border-bottom: 1px solid var(--color-F5);
            box-sizing: border-box;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    }
</style>
